<template>
  <div id="customerCenterTrack">
    <div class="customer-statistic">
      <div class="header-box">
        <van-nav-bar class="nav-bar" left-arrow title="轨迹追踪" @click-left="onClickLeft"></van-nav-bar>
        <div class="calendar-cell flex-j-sb flex-a-c" @click="showCalendar">
          <span>
            <van-icon class="iconfont icon-fontclass-rili"></van-icon>
            <span>{{ timeText }}</span>
          </span>
          <van-icon name="arrow"></van-icon>
        </div>
        <div class="cumulative">
          <p>累计访问次数</p>
          <div>
            <span class="cumulative-num">{{ visit_data.all_visit_count }}</span>
            <span>昨日访问{{ visit_data.yesterday_visit_people_count }}</span>
          </div>
        </div>

        <div class="statistic-box">
          <div class="cumulative-box">
            <p class="statistic-title">累计访问人数</p>
            <p class="statistic-num">{{ visit_data.all_visit_people_count }}</p>
            <div class="diff flex-j-sb flex-a-c">
              <span>较昨日{{ visit_data.yesterday_visit_people_count }}</span>
              <van-icon class="iconfont icon-rise" :class="visit_data.all_visit_people_count > visit_data.yesterday_visit_people_count ? 'increase-icon' : 'reduce-icon'"></van-icon>
            </div>
          </div>
          <div class="current-box">
            <p class="statistic-title">当日最高访问次数</p>
            <p class="statistic-num">{{ visit_data.today_visit_max_count }}</p>
            <div class="diff flex-j-sb flex-a-c">
              <span>较昨日{{ visit_data.yesterday_visit_max_count }}</span>
              <van-icon class="iconfont icon-rise" :class="visit_data.today_visit_max_count > visit_data.yesterday_visit_max_count ? 'increase-icon' : 'reduce-icon'"></van-icon>
            </div>
          </div>
        </div>
      </div>

      <div class="container">
        <div class="plane-block">
          <history-echart id="line-history-chart" :history="history"></history-echart>
        </div>
        <div class="plane-block">
          <port-echart barId="bar-port-chart" pieId="pie-port-chart" :port="port"></port-echart>
        </div>
      </div>
    </div>
    <div class="navBox">
      <div class="navLis" :class="tabInd == 1 ? 'select' : ''" @click="selectTab(1)">轨迹记录</div>
      <div class="navLis" :class="tabInd == 2 ? 'select' : ''" @click="selectTab(2)">页面排行</div>
      <div class="navLis" :class="tabInd == 3 ? 'select' : ''" @click="selectTab(3)">访客排行</div>
    </div>
    <template v-if="top_list.length > 0">
      <trackList v-if="tabInd == 1" :list="top_list" :display_set="display_set"></trackList>
      <pageRankList v-if="tabInd == 2" :list="top_list" :display_set="display_set"></pageRankList>
      <Visitorlist v-if="tabInd == 3" :list="top_list" :display_set="display_set"></Visitorlist>
    </template>
    <van-popup v-model="isShowCalendar" position="bottom">
      <van-datetime-picker @cancel="cancel" @confirm="confirm" v-model="currentDate" type="date" title="选择年月日" :max-date="maxDate" />
    </van-popup>
  </div>
</template>
<script>
import customerCenterTrack_controller from "./customerCenterTrack_controller";

export default customerCenterTrack_controller;
</script>
<style lang="scss" scoped>
#customerCenterTrack {
  padding-bottom: 1.5rem;
}

.fade-enter-active {
  transition: opacity 0.5s;
}

.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

@keyframes ident {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 0.75;
  }

  100% {
    opacity: 1;
  }
}

.navBox {
  margin: 0 1.75rem;
  background: rgba(231, 231, 232, 0.39);
  opacity: 1;
  border-radius: 18px;
  height: 2.25rem;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .navLis {
    flex: 1;
    text-align: center;
    height: 2.25rem;
    line-height: 2.25rem;
    font-size: 0.875rem;
    color: #999;
  }

  .select {
    border-radius: 18px;
    background: var(--themeBaseColor);
    animation: ident 0.5s;
    color: #fff;
  }
}

.customer-statistic {
  background-color: #f2f2f2;

  ::v-deep .header-box {
    padding: 0.94rem;
    padding-top: 0;
    color: #fff;
    background: var(--themeBaseColor);
    // background-image: url("../../../assets/images/workWx/customer_statistic_bg.png");
    // background-size: cover;
    .van-nav-bar {
      background-color: transparent;

      .van-icon-arrow-left {
        font-size: 18px;
        color: #fff;
      }

      .van-nav-bar__title {
        font-size: 18px;
        color: #fff;
      }
    }

    .van-hairline--bottom::after {
      display: none;
    }

    .calendar-cell {
      margin-top: 2rem;
      font-size: 15px;

      .icon-fontclass-rili {
        margin-right: 0.5rem;
      }
    }

    .cumulative {
      font-size: 10px;
      line-height: 30px;

      .cumulative-num {
        font-size: 23px;
        font-weight: bold;
        margin-right: 0.3rem;
      }
    }

    .statistic-box {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 1.2rem;

      .cumulative-box,
      .current-box {
        width: 9.38rem;
        padding: 0.69rem;
        background-color: #fff;
        border-radius: 0.31rem;

        .statistic-title {
          font-size: 12px;
          color: #575757;
        }

        .statistic-num {
          font-size: 18px;
          font-weight: bold;
          padding: 0.5rem 0;
          color: #323232;
        }

        .diff {
          font-size: 10px;
          color: #868686;
        }
      }
    }

    .increase-icon {
      color: #ee2525;
    }

    .reduce-icon {
      color: #4aa22b;
      transform: rotateX(180deg);
    }
  }

  .container {
    padding-bottom: 1rem;
  }

  .plane-block {
    margin: 0.63rem 0.94rem;
    border-radius: 0.53rem;
    background-color: #fff;
  }

  ::v-deep .calendar-popup {
    padding: 0.5rem 2rem;
  }
}

.flex {
  display: flex;
}

.flex-j-c {
  display: flex;
  justify-content: center;
}

.flex-j-sb {
  display: flex;
  justify-content: space-between;
}

.flex-a-c {
  display: flex;
  align-items: center;
}

.flex-a-fe {
  display: flex;
  align-items: flex-end;
}
</style>